<template>
    <div class="wrapper">
        <mt-header :fixed="false" title="头像" rightIcon="icon-guanbi" mtClass="no-bg" />
        <div class="headImg-box">
            <img :src="photo">
        </div>
        <div class="default-btn">
            <mt-button type="primary" size="large" @click.native="callEvent">更换头像</mt-button>
        </div>
    </div>
</template>

<script>
import { Toast } from 'mint-ui';
import { mapMutations, mapActions } from 'vuex'
import mtHeader from "@/components/Header"
import { dataURItoBlob, getSystemType } from '@/utils'
export default {
    data() {
        return {
            photo: this.$route.query.photo || 'static/default-headImg.png'
        }
    },
    components: {
        mtHeader
    },
    mounted(){
        //将要给原生调用的方法挂载到 window 上面
        if( getSystemType().type == 'android' ){
            window.sendPhotoBase64 = this.sendPhotoBase64;
        }
        if( getSystemType().type == 'ios' ){
            window.albumResult = this.albumResult;
        }
    },
    methods: {
        ...mapMutations('user', [
            'set_userInfo'
        ]),
        ...mapActions('user', [
            'post_userInfoByHeadImg_data'
        ]),
        callEvent(){
            if( getSystemType().type == 'android' ){
                window.javaObj.startAlbumPickUp(0);
            }
            if( getSystemType().type == 'ios' ){
                window.webkit.messageHandlers.StartAlbumPickUp.postMessage(null);
            }
        },
        sendPhotoBase64(str) {
            // console.log(str);
            var result = str.split(",");
            this.photo = 'data:image/png;base64,' + result[1];
            dataURItoBlob(this.photo, (res) => {
                this.postInfo(res);
            });
        },
        albumResult(base64){
            // console.log(base64);
            this.photo = 'data:image/png;base64,' + base64;
            dataURItoBlob(this.photo, (res) => {
                this.postInfo(res);
            });
        },
        postInfo(file){
            let formData = new FormData;
            formData.append('photoFile', file);
            this.post_userInfoByHeadImg_data(formData).then(res => {
                if( res.code == 200 ){
                    this.photo = res.data.photo;
                    this.set_userInfo(res.data)
                    Toast({
                        message: "设置成功",
                        iconClass: 'icon iconfont icon-ic_check'
                    })
                    this.$router.push('/account/myInfo');
                }else{
                    Toast({
                        message: res.msg,
                        iconClass: 'icon iconfont icon-dingdanzhuangtaishibai'
                    })
                    this.photo = this.$route.query.photo;
                }
            })
        }
    }
}
</script>

<style lang="stylus" scoped>
.wrapper{
    .headImg-box{
        img{
            width:auto;
            max-width:95%;
            margin:20px auto 0;
        }
    }
}  
</style>